<template>
  <div class="wholesale-add">
    <div class="control">
      <h1>长期寄售订单</h1>
      <el-row>
        <el-col :span="16" class="desc">描述性文字</el-col>
        <el-col :span="8" class="right">
          <el-button @click="onSaveDraft">暂存</el-button>
          <el-button type="primary" plain @click="onPrev" v-if="active_index !== 1">上一步</el-button>
          <el-button type="primary" @click="onNext" v-if="active_index !== 3">下一步</el-button>
          <el-button type="success" @click="onSubmit" v-else>提交</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="block">
      <section>
        <el-steps :active="active_index -1" finish-status="success" align-center>
          <el-step title="选择供应商及合同"></el-step>
          <el-step title="选择采购产品"></el-step>
          <el-step title="填写订单信息"></el-step>
        </el-steps>
      </section>
    </div>
    <article :hidden="!(active_index === 1)">
      <supplier-and-contract-component
        :supplier-id.sync="form_data.supplier"
        :contract-id.sync="form_data.contract"
        :bus-model="bus_model"
        @change="onSupplierAndContractChange"
      ></supplier-and-contract-component>
    </article>
    <article :hidden="!(active_index === 2)">
      <div class="block">
        <section>
          <el-form-renderer
            ref="ruleForm"
            label-width="100px"
            :form="readonly_formdata"
            :content="FIELDS_ORDER_DETAIL"
            inline
            readonly
          ></el-form-renderer>
        </section>
      </div>
      <purchase-products-list-component :products.sync="form_data.products"></purchase-products-list-component>
    </article>
    <article :hidden="!(active_index === 3)">
      <carryway-and-address-component
        @change-address="onAddressChanged"
        :carryway-id.sync="form_data.carryway"
        :address-id.sync="form_data.address"
        :is-edit="is_edit"
      ></carryway-and-address-component>
      <div class="block">
        <header>
          <h2>备注信息</h2>
        </header>
        <section>
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form_data.remark"></el-input>
        </section>
      </div>
      <div class="block">
        <header>
          <h2>附加信息</h2>
        </header>
        <section>
          <el-form-renderer
            label-width="100px"
            v-model="form_data.extend"
            :content="extend_model"
            inline
          ></el-form-renderer>
        </section>
      </div>
    </article>
  </div>
</template>

<script src="./index.js"></script>
<style lang="less" src="./index.less"></style>
